<template>
  <div>
    <div class="process-group">
      <!--头部搜索工作栏-->
      <div class="header-search">
        <div class="header-left">
          <span class="fallback-span" @click="fallbackOperate">
            <svg-icon icon-class="fallback" class="svg-icon-size-three"></svg-icon>
          </span>
          <span class="process-name-span">
            {{ processName }}
          </span>
        </div>
        <div class="header-right">
          <el-button type="success" style="width: 132px; margin-right: 10px"
            @click="addProcessVersion"><svg-icon icon-class="process-create"
              class="svg-icon-size-one svg-icon-margin" />新建版本</el-button>
          <el-input placeholder="搜索版本名称" style="width: 240px" v-model="queryParams.name"
            @keyup.enter.native="getList" @blur="getList">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <!--内容工作栏-->
      <div class="main-content">
        <div class="right-table">
          <!-- 列表 -->
          <el-table ref="table" v-loading="loading" :data="list">
            <!-- <el-table-column type="selection" width="50"> </el-table-column> -->
            <el-table-column label="版本号" align="center" prop="versionNo" width="100" />
            <el-table-column label="流程标识" align="center" prop="key" width="150" />
            <el-table-column align="left" prop="name" width="200" resizable show-overflow-tooltip>
              <template slot="header">
                <el-tooltip class="item" effect="light" placement="top-start">
                  <template slot="content">
                    <p>
                      <svg-icon icon-class="form-exit"
                        class="svg-icon-size-one svg-icon-margin" />已绑定表单
                    </p>
                    <p>
                      <svg-icon icon-class="form-none"
                        class="svg-icon-size-one svg-icon-margin" />未绑定表单
                    </p>
                  </template>
                  <span><i class="el-icon-question"></i> 流程名称
                  </span></el-tooltip>
              </template>
              <template slot-scope="scope">
                <svg-icon :icon-class="scope.row.formId ? 'form-exit' : 'form-none'"
                  class="svg-icon-size-one svg-icon-margin" /><span>{{ scope.row.name || "-"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column label="关联事项" align="center" prop="matterName">
              <template v-slot="scope">
                <span>{{ scope.row.matterName || "-" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开启状态" align="center" prop="status" width="150" resizable
              show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.processDefinition == null" class="open-doing">
                  设计中
                </span>
                <span v-else>
                  <span v-if="scope.row.status == 1" class="open-done">启用中</span>
                  <span v-else class="open-do">待启用</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作用户" align="center" prop="updateUserName">
            </el-table-column>
            <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.updateTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="版本描述" align="center" prop="category">
              <template v-slot="scope">
                {{ scope.row.description || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="400">
              <template v-slot="scope">
                <el-button type="text" @click="handleDesign(scope.row)" size="mini"
                  icon="el-icon-setting">
                  <span>模型设计</span>
                </el-button>
                <el-button type="text" @click="handleFormInfo(scope.row)" size="mini"
                  icon="el-icon-s-order">
                  <span>表单绑定</span>
                </el-button>
                <el-button type="text" @click="relatedMatters(scope.row)" size="mini"
                  icon="el-icon-link">
                  <span>关联事项</span>
                </el-button>
                <el-button type="text" @click="handleDeploy(scope.row)" size="mini">
                  <span>
                    <svg-icon icon-class="arrange" class="svg-icon-size-one" />部署
                  </span>
                </el-button>
                <el-button type="text" @click="versionHandle(scope.row)" size="mini">
                  <span v-if="scope.row.status == 1"><svg-icon icon-class="hang-up"
                      class="svg-icon-size-one" />挂起</span>
                  <span v-else><svg-icon icon-class="start-using"
                      class="svg-icon-size-one" />启用</span>
                </el-button>
                <el-dropdown trigger="click">
                  <el-button type="text"><svg-icon icon-class="more" class="svg-icon-size-three"
                      style="margin-left: 10px" /></el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-show="scope.row.processDefinition != null"
                      @click.native="handleBpmnDetail(scope.row)">
                      <span><svg-icon icon-class="PC"
                          class="svg-icon-size-one" />预览</span></el-dropdown-item>
                    <el-dropdown-item @click.native="versionEdit(scope.row)">
                      <span><svg-icon icon-class="version-base-info"
                          class="svg-icon-size-one" />基本信息</span></el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row)">
                      <span style="color: red"><svg-icon icon-class="file-delete"
                          class="svg-icon-size-one" />删除</span></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
    </div>

    <!-- 流程表单配置详情 -->
    <el-dialog title="表单信息" :visible.sync="formInfoOperate.visible"
      :width="formInfoOperate.currentOperateSteps == 3 ? '500px' : '50%'" append-to-body center>
      <div v-show="formInfoOperate.currentOperateSteps == 3">
        <el-form ref="formInfoForm" :model="formInfoOperate.form" :rules="formInfoOperate.rules"
          label-width="110px">
          <el-form-item label="表单类型">
            <el-radio-group v-model="formInfoOperate.form.formType">
              <el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)"
                :label="parseInt(dict.value)">
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formInfoOperate.form.formType === 10" label="流程表单">
            <el-select v-model="formInfoOperate.form.formId" clearable style="width: 85%">
              <el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formInfoOperate.form.formType === 20" label="表单提交路由"
            prop="formCustomCreatePath" key="formCustomCreatePath">
            <el-input v-model="formInfoOperate.form.formCustomCreatePath" placeholder="请输入表单提交路由"
              style="width: 85%" />
            <el-tooltip class="item" effect="light"
              content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create" placement="top">
              <i style="padding-left: 5px" class="el-icon-question" />
            </el-tooltip>
          </el-form-item>
          <el-form-item v-if="formInfoOperate.form.formType === 20" label="表单查看路由"
            prop="formCustomViewPath" key="formCustomViewPath">
            <el-input v-model="formInfoOperate.form.formCustomViewPath" placeholder="请输入表单查看路由"
              style="width: 85%" />
            <el-tooltip class="item" effect="light"
              content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view" placement="top">
              <i style="padding-left: 5px" class="el-icon-question" />
            </el-tooltip>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="formInfoCancel" type="info" plain>取 消</el-button>
          <el-button type="primary" @click="formInfoSubmitForm">确 认</el-button>
        </div>
      </div>
      <div v-show="formInfoOperate.currentOperateSteps != 3">
        <parser :key="new Date().getTime()" :form-conf="detailForm" />
        <div>
          <el-button type="text" @click="changeNewForm">更换表单</el-button>
        </div>
      </div>
    </el-dialog>
    <!--模型绑定事项弹出框-->
    <el-dialog title="关联事项" :visible.sync="operateBtn.dialog" width="500px" append-to-body center>
      <el-form :model="operateBtn.form" :rules="operateBtn.rules" ref="bangdingForm">
        <el-form-item label="选择处室" prop="officeId">
          <el-select v-model="operateBtn.form.officeId" placeholder="请选择处室" style="width: 80%">
            <el-option v-for="item in officeData" :key="item.id" :label="item.officName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择事项" prop="matters">
          <el-select v-model="operateBtn.form.matters" placeholder="请选择事项" style="width: 80%">
            <el-option v-for="item in matterData" :key="item.id" :label="`${item.title}`"
              :value="`${item.id}-${item.title}`">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBangding" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="submitBangding">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 流程模型图的预览 -->
    <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
    </el-dialog>

    <!-- 版本流程对话框(添加) -->
    <el-dialog :title="title" :visible.sync="processVersionDialog" width="500px" append-to-body
      center>
      <!--模拟步骤条-->
      <div class="steps-div">
        <div class="el-step-one">
          <div class="el-step__icon">
            <div class="el-step__icon-circle" :style="{
              borderColor: currentStep == 1 ? '#2A67F4' : '#A5ACB6',
            }"></div>
            <div class="el-step__icon-inner">1</div>
            <svg-icon :icon-class="currentStep == 1 ? 'doing' : 'finished'"
              class="el-step__icon-state"></svg-icon>
          </div>
          <div class="el-step__title" :style="{ color: currentStep == 1 ? '#23272E' : '#535F6E' }">
            选择要复制的版本
          </div>
        </div>
        <div class="el-step-two"></div>
        <div class="el-step-three">
          <div class="el-step__icon">
            <div class="el-step__icon-circle" :style="{
              borderColor: currentStep == 1 ? '#A5ACB6' : '#2A67F4',
            }"></div>
            <div class="el-step__icon-inner">2</div>
            <svg-icon :icon-class="currentStep == 1 ? '' : 'doing'"
              class="el-step__icon-state"></svg-icon>
          </div>
          <div class="el-step__title" :style="{ color: currentStep == 1 ? '#535F6E' : '#23272E' }">
            填写新版本信息
          </div>
        </div>
      </div>
      <!--步骤条下具体的内容展示-->
      <div v-if="currentStep == 1">
        <div class="steps-content">
          <el-table ref="tableChild" :data="noPageList" @current-change="handleSelectionChange"
            border>
            <el-table-column label="" align="center" width="60">
              <template slot-scope="scope">
                <el-radio v-model="tableRadioSelected"
                  :label="scope.row.modelId"><span></span></el-radio>
              </template>
            </el-table-column>
            <el-table-column label="版本名称" align="center" prop="name" />
            <el-table-column label="版本号" align="center" prop="versionNo"
              width="60"></el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else>
        <el-form ref="versionForm" :model="versionOperate.form" :rules="versionOperate.rules"
          label-width="110px">
          <el-form-item label="版本名称" prop="name">
            <el-input v-model="versionOperate.form.name" placeholder="请输入版本名称" clearable />
          </el-form-item>
          <el-form-item label="版本描述" prop="description">
            <el-input type="textarea" v-model="versionOperate.form.description" clearable />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="versionCancel" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="continueStep" v-if="currentStep == 1"
          :disabled="tableRadioSelected == '' ? true : false">继 续</el-button>
        <el-button type="primary" @click="versionSubmitForm" v-else>确 认</el-button>
      </div>
    </el-dialog>
    <el-dialog title="基本信息" :visible.sync="versionEditOperate.visible" width="500px" append-to-body
      center>
      <el-form ref="versionEditForm" :model="versionEditOperate.form"
        :rules="versionEditOperate.rules" label-width="110px">
        <el-form-item label="版本名称" prop="name">
          <el-input v-model="versionEditOperate.form.name" placeholder="请输入版本名称" clearable />
        </el-form-item>
        <el-form-item label="版本描述" prop="description">
          <el-input type="textarea" v-model="versionEditOperate.form.description" clearable />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="versionEditCancel" type="info" plain>取 消</el-button>
        <el-button type="primary" @click="versionEditSubmitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deployModel, getModel } from "@/api/bpm/model";
import {
  queryVersionPageList,
  queryVersionList,
  createVersion,
  saveBaseInfo,
  formBinding,
  versionDelete,
  switchOperateState,
  matterBinding,
} from "@/api/bpm/processGroup";
import { getEnterpriseList, getOfficeQueryPage } from "@/api/enterprise/info";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { getForm, getAllOpenForms } from "@/api/bpm/form";
import { decodeFields } from "@/utils/formGenerator";
import Parser from "@/components/parser";
import { getBaseHeader } from "@/utils/request";
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "model",
  components: {
    Parser,
    Treeselect,
    taskAssignRuleDialog,
  },
  data() {
    return {
      initOfficeData: {
        id: "", //初始化处室id
        flag: true,
      },
      matterData: [], //事项数据
      officeData: [], //所有处室数据
      operateBtn: {
        dialog: false,
        form: {
          officeId: undefined,
          matters: undefined,
        },
        rules: {
          officeId: [
            { required: true, message: "关联处室不能为空", trigger: "change" },
          ],
          matters: [
            { required: true, message: "关联事项不能为空", trigger: "change" },
          ],
        },
      },
      currentStep: 1, //新建流程版本时，用来记录当前操作的是哪一步骤
      active: 1,
      processName: "流程版本",
      currentOperateState: 2, //1表示挂起，2表示启用，3表示部署
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        modelInfoId: "", //流程模型id
      },

      // BPMN 数据
      showBpmnOpen: false,
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 流程表单详情
      detailOpen: false,
      detailForm: {
        fields: [],
      },

      // 流程表单
      title: "",
      open: false,
      form: {},
      // 表单校验
      rules: {
        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formType: [
          { required: true, message: "流程名称不能为空", trigger: "blur" },
        ],
        formId: [
          { required: true, message: "业务表单不能为空", trigger: "blur" },
        ],
        category: [
          { required: true, message: "流程分类不能为空", trigger: "blur" },
        ],
        formCustomCreatePath: [
          { required: true, message: "表单提交路由不能为空", trigger: "blur" },
        ],
        formCustomViewPath: [
          { required: true, message: "表单查看路由不能为空", trigger: "blur" },
        ],
      },

      // 流程导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin-api" + "/bpm/model/import",
        // 表单
        form: {},
        // 校验规则
        rules: {
          key: [
            { required: true, message: "流程标识不能为空", trigger: "blur" },
          ],
          name: [
            { required: true, message: "流程名称不能为空", trigger: "blur" },
          ],
        },
      },
      // 流程表单的下拉框的数据
      forms: [],

      // 数据字典
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
      taskAssignRuleDictDatas: getDictDatas(
        DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE
      ),
      //新建流程版本弹出框
      processVersionDialog: false,
      tableRadioSelected: "",
      //无分页的版本列表数据
      noPageList: [],
      //新建版本时，选择要复制的版本
      copy: {
        selected: "",
      },
      versionOperate: {
        form: {
          name: "",
        },
        // 校验规则
        rules: {
          name: [
            { required: true, message: "版本名称不能为空", trigger: "blur" },
          ],
        },
      },
      //基本信息
      versionEditOperate: {
        modelId: "",
        visible: false,
        form: { name: "", description: "" },
        // 校验规则
        rules: {
          name: [
            { required: true, message: "版本名称不能为空", trigger: "blur" },
          ],
        },
      },
      //表单创建及编辑的相关信息
      formInfoOperate: {
        modelId: "",
        visible: false,
        currentOperateSteps: null, ////1表示挂起，2表示启用，3表示部署
        form: {},
        rules: {
          formType: [
            { required: true, message: "表单类型不能为空", trigger: "blur" },
          ],
          formId: [
            { required: true, message: "业务表单不能为空", trigger: "blur" },
          ],
          formCustomCreatePath: [
            {
              required: true,
              message: "表单提交路由不能为空",
              trigger: "blur",
            },
          ],
          formCustomViewPath: [
            {
              required: true,
              message: "表单查看路由不能为空",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  watch: {
    "operateBtn.form.officeId": {
      handler(val) {
        this.operateBtn.form.matters =
          val == this.initOfficeData.id
            ? this.operateBtn.form.matters
            : undefined;
        getEnterpriseList({
          officeId: val,
          pageNo: 1,
          pageSize: 10000,
        }).then((res) => {
          const { list } = res?.data || {};
          this.matterData = list || [];
        });
      },
      deep: true,
    },
  },
  created() {
    //获取流程id
    this.queryParams.modelInfoId = this.$route.query.modelId;
    //获取无分页的版本数据
    //this.queryVersionList();
    this.getList();
    // 获得流程表单的下拉框的数据
    getAllOpenForms().then((response) => {
      this.forms = response.data;
    });
    //获取所有处室下的数据
    getOfficeQueryPage({
      pageNo: 1,
      pageSize: 100,
    }).then((res) => {
      const { list } = res.data;
      this.officeData = list || [];
    });
  },
  methods: {
    queryVersionList() {
      queryVersionList(this.queryParams.modelInfoId).then((res) => {
        this.noPageList = res.data;
        console.log("!!!@:", this.noPageList);
      });
    },
    //继续下一步
    continueStep() {
      this.currentStep = 2;
    },
    //新建流程版本
    addProcessVersion() {
      this.processVersionDialog = true;
      this.title = "创建新的版本流程";
      //新建版本之前，更新下能引用的版本
      this.queryVersionList();
    },
    //返回操作
    fallbackOperate() {
      this.$router.push({
        path: "/bpm/manager/model",
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询流程模型列表 */
    getList() {
      this.loading = true;
      queryVersionPageList(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        key: undefined,
        name: undefined,
        description: undefined,
        category: undefined,
        formType: undefined,
        formId: undefined,
        formCustomCreatePath: undefined,
        formCustomViewPath: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 设计按钮操作 */
    handleDesign(row) {
      this.$router.push({
        path: "/bpm/manager/model/design",
        query: {
          modelId: row.id,
          processModelId: this.queryParams.modelInfoId,
        },
      });
    },
    /**基本信息 */
    versionEdit(row) {
      this.versionEditOperate.visible = true;
      this.versionEditOperate.form.name = row.name;
      this.versionEditOperate.form.description = row.description;
      this.versionEditOperate.modelId = row.id;
    },
    /**表单信息 */
    handleFormInfo(row) {
      this.formInfoOperate.modelId = row.id;
      //当表单id存在时，说明此时的状态时挂起或者启用
      if (row.formId) {
        getForm(row.formId).then((response) => {
          // 设置值
          const data = response.data;
          this.detailForm = {
            ...JSON.parse(data.conf),
            fields: decodeFields(data.fields),
          };
        });
        this.formInfoOperate.currentOperateSteps = row.status == 1 ? 1 : 2;
        // 业务表单
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath });
      } else {
        //表单不存在时，那就表示当前状态时部署，需要去绑定表单
        this.formInfoOperate.currentOperateSteps = 3;
      }
      this.formInfoOperate.visible = true;
    },
    /**更换或新建表单 */
    changeNewForm() {
      this.formInfoOperate.currentOperateSteps = 3;
    },
    formInfoSubmitForm() {
      this.$refs["formInfoForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = this.formInfoOperate.form;
        params.id = this.formInfoOperate.modelId;
        formBinding(params).then((res) => {
          this.$message.success("绑定成功");
          this.formInfoCancel();
        });
      });
    },
    formInfoCancel() {
      this.$refs["formInfoForm"].resetFields();
      this.formInfoOperate.form = {};
      this.formInfoOperate.visible = false;
      this.formInfoOperate.modelId = "";
      this.getList();
    },
    /**新建版本 */
    versionSubmitForm() {
      this.$refs["versionForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = this.versionOperate.form;
        params.sourceModelId = this.copy.selected;
        createVersion(params).then((res) => {
          this.$message.success("新建成功");
          this.versionCancel();
        });
      });
    },
    versionCancel() {
      this.currentStep = 1;
      this.tableRadioSelected = "";
      this.versionOperate.form = { name: "" };
      this.processVersionDialog = false;
      this.$refs["versionForm"].resetFields();
      this.getList();
    },
    versionEditSubmitForm() {
      this.$refs["versionEditForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let params = this.versionEditOperate.form;
        params.id = this.versionEditOperate.modelId;
        saveBaseInfo(params).then((res) => {
          this.$message.success("保存成功");
          this.versionEditCancel();
        });
      });
    },
    versionEditCancel() {
      this.versionEditOperate.form = { name: "", description: "" };
      this.versionEditOperate.modelId = "";
      this.versionEditOperate.visible = false;
      this.getList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const that = this;
      this.$modal
        .confirm("是否删除该流程！！")
        .then(function () {
          versionDelete(row.id).then((response) => {
            that.getList();
            that.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => { });
    },
    /**部署、挂起、启用 */
    versionHandle(row) {
      //启用或停用

      let params = {};
      params.modelId = row.id;
      //当前状态是0或者空的时候，传递的参数都是1
      params.status = row.status == 1 ? 0 : 1;
      switchOperateState(params).then((res) => {
        this.getList();
        this.$modal.msgSuccess("切换成功");
      });
    },
    /** 部署按钮操作 */
    handleDeploy(row) {
      const that = this;
      this.$modal
        .confirm("是否部署该流程！！")
        .then(function () {
          deployModel(row.id).then((response) => {
            that.getList();
            that.$modal.msgSuccess("部署成功");
          });
        })
        .catch(() => { });
    },
    /** 流程表单的详情按钮操作 */
    handleFormDetail(row) {
      // 流程表单
      if (row.formId) {
        getForm(row.formId).then((response) => {
          // 设置值
          const data = response.data;
          this.detailForm = {
            ...JSON.parse(data.conf),
            fields: decodeFields(data.fields),
          };
          // 弹窗打开
          this.detailOpen = true;
        });
        // 业务表单
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath });
      }
    },
    /** 流程图的详情按钮操作 */
    handleBpmnDetail(row) {
      getModel(row.id).then((response) => {
        this.bpmnXML = response.data.bpmnXml;
        // 弹窗打开
        this.showBpmnOpen = true;
      });
    },
    handleSelectionChange(currentRow, oldRow) {
      this.tableRadioSelected = currentRow.modelId;
      this.copy.selected = currentRow.modelId;
    },
    //关联事项
    relatedMatters(row) {
      this.operateBtn.dialog = true;
      this.formInfoOperate.modelId = row.id;
      this.operateBtn.form.officeId = row.officeId || undefined;
      let { id, flag } = this.initOfficeData;
      if (flag) {
        this.initOfficeData.id = this.operateBtn.form.officeId;
        this.initOfficeData.flag = false;
      }
      this.operateBtn.form.matters =
        `${row.matterId}-${row.matterName}` || undefined;
    },
    submitBangding() {
      this.$refs["bangdingForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        let { matters, officeId } = this.operateBtn.form;
        let params = {
          id: this.formInfoOperate.modelId,
          matterId: matters.split("-")[0],
          matterName: matters.split("-")[1],
          officeId,
        };

        matterBinding(params).then((res) => {
          this.cancelBangding();
        });
      });
    },
    cancelBangding() {
      this.operateBtn.dialog = false;
      this.operateBtn.form = {
        officeId: undefined,
        matters: undefined,
      };
      this.$refs["bangdingForm"].resetFields();
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-process-designer {
  height: calc(100vh - 200px);
}

.process-group {
  height: 100vh;
  padding: 0 16px;

  .header-search {
    height: 56px;
    display: flex;
    align-items: center;

    .header-left {
      width: 20%;
      height: 32px;
      display: flex;
      align-items: center;

      .fallback-span {
        display: inline-block;
        width: 32px;
        cursor: pointer;
      }

      .process-name-span {
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #23272e;
      }
    }

    .header-right {
      flex: 1;
      text-align: right;
    }
  }

  .main-content {
    height: calc(100vh - 56px);
    // display: flex;

    /* .right-table {
      flex: 1;
    } */
  }
}

.svg-icon-size-one {
  font-size: 16px;
}

.svg-icon-size-two {
  font-size: 20px;
}

.svg-icon-size-three {
  font-size: 24px;
}

.svg-icon-margin {
  margin-right: 10px;
}

.steps-div {
  height: 54px;
  margin: 0 12px;
  display: flex;
  align-items: center;

  .el-step-one {
    display: flex;
    height: 54px;
    align-items: center;
    width: 150px;
  }

  .el-step-two {
    flex: 1;
    height: 2px;
    background: #e2e5e9;
  }

  .el-step-three {
    width: 128px;
    display: flex;
    height: 54px;
    align-items: center;
  }

  .el-step__icon {
    width: 28px;
    height: 28px;
    position: relative;

    .el-step__icon-circle {
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 14px;
      border: 2px solid #2a67f4;
    }

    .el-step__icon-inner {
      position: absolute;
      font-size: 12px;
      font-weight: bold;
      color: #23272e;
    }

    .el-step__icon-state {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }

  .el-step__title {
    font-size: 14px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #535f6e;
  }
}

.steps-content {
  height: 300px;
  padding: 14px;
  border-top: 1px solid #e8eaed;
  overflow-y: auto;

  .circle-unselected {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 14px 14px 14px 14px;
    opacity: 1;
    border: 2px solid #e3e5e8;
  }

  .circle-selected {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #0047ea;
    border-radius: 14px;
  }
}

.open-doing::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #ffa229;
}

.open-done::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #30bb2f;
}

.open-do::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  background: #b8bec7;
}

.open-doing,
.open-done,
.open-do {
  display: inline-block;
  border-radius: 2px;
  padding: 3px 12px;
  border: 1px solid #e3e5e8;
}
</style>
